/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchData, receiveData} from '@/action';
import {get, post} from "@/axios/tools";
import {Upload, Icon, Modal, Form, Button} from 'antd';
const FormItem = Form.Item;

class UploadPhoto extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            previewVisible: false,
            previewImage: '',
            fileList: [],
            loading: false,
        };
    }

    handleCancel = () => this.setState({previewVisible: false});

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    };

    handleChange = ({fileList}) => this.setState({fileList});

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const files = values.fileList.fileList.map(v => v.originFileObj);
                this.setState({loading:true});
                post('/image/items', {file: files}).then(data => {
                    console.log('  handleSubmit   ', data);
                    this.props.form.resetFields();
                    this.setState({fileList: [],loading:false});
                }).catch(e=>{
                    this.setState({loading:false});
                });
            }
        });
    };

    render() {
        const {previewVisible, previewImage, fileList} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="clearfix">
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('fileList', {
                            rules: [{required: true, message: '请选择上传图片'}],
                        })(
                            <Upload
                                listType="picture-card"
                                fileList={fileList}
                                onPreview={this.handlePreview}
                                onChange={this.handleChange}
                            >
                                <div>
                                    <Icon type="plus"/>
                                    <div className="ant-upload-text">Upload</div>
                                </div>
                            </Upload>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" className="login-form-button"
                                loading={this.state.loading}
                        >
                            上传
                        </Button>
                    </FormItem>
                </Form>

                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>
        );
    }
}

const mapStateToPorps = state => {
    const {auth} = state.httpData;
    return {auth};
};
const mapDispatchToProps = dispatch => ({
    fetchData: bindActionCreators(fetchData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});


export default connect(mapStateToPorps, mapDispatchToProps)(Form.create()(UploadPhoto));